<template>
<div>
    <header class="header">
    <figure>
        <div  class="public">
        <div>
            <img src="http://img2.imgtn.bdimg.com/it/u=2159481810,3897864870&fm=27&gp=0.jpg" alt="">
        </div>
        </div>
    </figure>
    <div>德玛西亚</div>
    <div>
        <i class="iconfont icon-money-o"></i>
        <i class="iconfont icon-tubiaolunkuo-"></i>
    </div>
    </header>
    <div class="back">
        <div class="back_bottom">
            <div class="marginTop">
                <div class="headPortrait">
                    <div>
                        <img src="http://img2.imgtn.bdimg.com/it/u=2159481810,3897864870&fm=27&gp=0.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="name">阔阔哟9988666</div>
            <div class="state">游戏离线</div>  
        </div> 
        <div class="position">
            <div class="table">
                <p :class="nn == 0?'active':''" @click="_table(0)">战绩</p>
                <p :class="nn == 1?'active':''" @click="_table(1)">能力</p>
                <p :class="nn == 2?'active':''" @click="_table(2)">资产</p>
            </div> 
            <!-- <div class="progress"></div> -->
        </div>
    </div>
    <swiper :options="swiperOption" ref="mySwiper" class="_swiper">
      <swiper-slide class="slide1">
          <div>
            <div>
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521188511295&di=56ec30b3a2e387d9d39217c8303cc7df&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D4f67767c71cf3bc7e800cde4e101babd%2Fcb9eb2fd5266d016214a1459962bd40735fa3531.jpg" alt="">
                <p>最强王者</p>
            </div>
            <div>
                <div>
                    <p>总局数 <span>9999</span></p>
                    <p>胜率 <span>100%</span></p>
                </div>
                <div>
                    <dl>
                        <dt><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521188511295&di=56ec30b3a2e387d9d39217c8303cc7df&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D4f67767c71cf3bc7e800cde4e101babd%2Fcb9eb2fd5266d016214a1459962bd40735fa3531.jpg" alt=""></dt>
                        <dd>超神</dd>
                    </dl>
                    <dl>
                        <dt><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521188511295&di=56ec30b3a2e387d9d39217c8303cc7df&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D4f67767c71cf3bc7e800cde4e101babd%2Fcb9eb2fd5266d016214a1459962bd40735fa3531.jpg" alt=""></dt>
                        <dd>五杀</dd>
                    </dl>
                    <dl>
                        <dt><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521188511295&di=56ec30b3a2e387d9d39217c8303cc7df&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D4f67767c71cf3bc7e800cde4e101babd%2Fcb9eb2fd5266d016214a1459962bd40735fa3531.jpg" alt=""></dt>
                        <dd>四杀</dd>
                    </dl>
                </div>
            </div>
            <div> > </div>
          </div>
          <div class="list">
              <p><span>游戏任务(3)</span></p>
              <p>虚空吞噬万物 > </p>
          </div>
          <div class="list-bottom">
              <p>我的战绩 ﹀</p>
              <p><span></span><span>对战助手 > </span></p>
          </div>
          <div class="data">
              <div v-for="(v,i) in list" :key="i">
                  <div class="_left"><img :src="v.imgUrl" alt=""></div>
                  <div class="_center">
                      <div class="cent_left">
                          <p>{{v.left_p1}}<span>{{v.span1}}</span></p>
                          <p>{{v.left_p2}}</p>
                      </div>
                      <div class="cent_right">
                          <p>{{v.right_p1}}<span>{{span2}}</span></p>
                          <p>{{v.you}}</p>
                      </div>
                  </div>
                  <div class="_right">{{v._right}}</div>
              </div>
          </div>
      </swiper-slide>
      <swiper-slide>321</swiper-slide>
      <swiper-slide>321</swiper-slide>
    </swiper>
</div>
</template>
<script>
export default {
  data(){
    return{
        list:[
            {
                imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521188511295&di=56ec30b3a2e387d9d39217c8303cc7df&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D4f67767c71cf3bc7e800cde4e101babd%2Fcb9eb2fd5266d016214a1459962bd40735fa3531.jpg",
                left_p1:"胜利",
                span1:"16 / 0 / 18",
                left_p2:"大乱斗",
                right_p1:"02-25",
                span2:"06:24",
                you:"友",
                _right:" > ",
            },
            {
                imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521188511295&di=56ec30b3a2e387d9d39217c8303cc7df&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D4f67767c71cf3bc7e800cde4e101babd%2Fcb9eb2fd5266d016214a1459962bd40735fa3531.jpg",
                left_p1:"胜利",
                span1:"16 / 0 / 18",
                left_p2:"大乱斗",
                right_p1:"02-25",
                span2:"06:24",
                you:"友",
                _right:" > ",
            },
            {
                imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521188511295&di=56ec30b3a2e387d9d39217c8303cc7df&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D4f67767c71cf3bc7e800cde4e101babd%2Fcb9eb2fd5266d016214a1459962bd40735fa3531.jpg",
                left_p1:"胜利",
                span1:"16 / 0 / 18",
                left_p2:"大乱斗",
                right_p1:"02-25",
                span2:"06:24",
                you:"友",
                _right:" > ",
            },
            {
                imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521188511295&di=56ec30b3a2e387d9d39217c8303cc7df&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D4f67767c71cf3bc7e800cde4e101babd%2Fcb9eb2fd5266d016214a1459962bd40735fa3531.jpg",
                left_p1:"胜利",
                span1:"16 / 0 / 18",
                left_p2:"大乱斗",
                right_p1:"02-25",
                span2:"06:24",
                you:"友",
                _right:" > ",
            },
        ],
        swiperOption: {
            slidesPerView :'auto',
        },
        nn:0
    }  
  },
  methods:{
      _table(e){
          this.nn = e;
          console.log(this.$refs.mySwiper.swiper.slideTo(e))
      }
  }
}
</script>
<style lang="less" scoped>
.px2rem(@name,@px){
  @{name}: @px / 75 * 1rem;
}
.header{
  @h: 45px;
  z-index: 99;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: @h;
  display: flex;
  justify-content:space-between;
  background: #265A96;
  // box-shadow: 0 3px 5px #ccc;
  figure{
    position: relative;
    z-index: 999;
    width: @h;
    display: flex;
    align-items: center;
    width:45px;
    height:45px;
    .px2rem(margin-left,30);
    .public{
      width:35px;
      height:35px;
      img{
        border-radius: 50%;
        width:100%;
      }
    }
  }
  &>div:nth-child(2){
    flex:1;
    color: #FCBB7B;
    .px2rem(font-size,30);
    .px2rem(border-radius,10);
    text-align: center;
    line-height:45px;
    // i{
    //     .px2rem(padding-left,20);
    //     .px2rem(padding-right,20);
    // }
  }
  &>div:last-child{
    display:flex;
    align-items: center;
    color: #FCBB7B;
    i{
      .px2rem(padding-left,15);
      .px2rem(font-size,50);
    }
    &>i:last-child{
      .px2rem(font-size,45);
      .px2rem(padding-right,15);
    }
  }  
}
.marginTop{
    margin-top:45px;
    display: flex;
    justify-content: center;
    align-items: center;
    .headPortrait{
        display: flex;
        justify-content: center;
        align-items: center;
        .px2rem(width,110);
        .px2rem(height,110);
        .px2rem(margin-top,15);
        border-radius: 50%;
        background: #FCBB7B;
        div{
            .px2rem(width,100);
            .px2rem(height,100);
            img{
                width:100%;
                border-radius: 50%;
            }
        }
    }
}
.name,.state{
    .px2rem(line-height,45);
    .px2rem(font-size,25);
    text-align:center;
}
.state{
    .px2rem(padding-bottom,30);
}
.position{
    .px2rem(padding-bottom,10);
    position: relative;
    border-bottom:1px solid #ccc;
    .table{
        display: flex;
        justify-content: space-between;
        align-items: center;
        p{
            flex:1;
            text-align: center;
            .px2rem(line-height,70);
            .px2rem(font-size,30);
            color:#666;
        }
    }
    .progress{
        position: absolute;
        top:0;
        left:7%;
        width:20%;
        .px2rem(height,70);
        border-radius:50%;
        // .px2rem(border-radius,35);
        background: skyblue;
        opacity: .2;
        transition:left .5s ease;
    }
}
.back{
     background: linear-gradient(#529D98,#D9EDEC);
}
.back_bottom{
    background:#529D98;
    border-bottom-left-radius: 40%;
    border-bottom-right-radius: 40%;
}
._swiper{
    background:white;
    .slide1{
        background: #f0f0f0;
        &>div:first-child{
            background: white;
            display: flex;
            .px2rem(padding-top,20);
            .px2rem(padding-bottom,20);
            &>div:first-child{
                width:30%;
                border-right: 1px solid #ccc;
                display: flex;
                flex-direction: column;
                color:#FCBB7B;
                .px2rem(font-size,25);
                text-align: center;
                img{
                    width:100%;
                    // height:100%;
                }
            }
            &>div:nth-child(2){
                flex:1;
                &>div:first-child{
                    display: flex;
                    justify-content: space-between;
                    align-items:center;
                    .px2rem(font-size,29);
                    .px2rem(padding-bottom,20);
                    color: #FCBB7B;
                    .px2rem(padding-left,20);
                    p{
                        span{
                            .px2rem(font-size,30);
                            font-weight: bold;
                        }
                    }
                }
                &>div:nth-child(2){
                    display: flex;
                    justify-content: space-between;
                    dl{
                        flex:1;
                        dt{
                            width:80%;
                            margin-left:10%;
                            img{
                                width:100%;
                            }
                        }
                        dd{
                            text-align: center;
                            color:#666;
                            .px2rem(font-size,22);
                            .px2rem(line-height,40);
                        }
                    }
                }
            }
            &>div:last-child{
                width:8%;
                .px2rem(font-size,30);
                display: flex;
                justify-content: center;
                align-items:center;
            }
        }
        .list{
            .px2rem(margin-top,20);
            .px2rem(padding-top,15);
            .px2rem(padding-bottom,15);
            .px2rem(padding-right,20);
            background: white;
            border-bottom:1px solid #ccc;
            display: flex;
            justify-content: space-between;
            .px2rem(height,60);
            .px2rem(line-height,60);
            &>p:first-child{
                color:#FCBB7B;
                .px2rem(font-size,30);
                border-left:5px solid #FCBB7B;
                span{
                    .px2rem(padding-left,20);
                }
            }
            &>p:last-child{
                color:#666;
                .px2rem(font-size,28);
            }            
        }
        .list-bottom{
            .px2rem(padding-top,15);
            .px2rem(padding-bottom,15);
            .px2rem(padding-left,30);
            background: white;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .px2rem(height,60);
            .px2rem(line-height,45);
            .px2rem(font-size,29);
            color:#666;
            p:last-child{
                .px2rem(padding-left,10);
                .px2rem(padding-right,20);
                background: #239890;
                color:white;
                display:flex;
                position: relative;
                span:first-child{
                    position: absolute;
                    top:0;
                    .px2rem(left,-43);
                    display:block;
                    width:0;
                    height: 0;
                    .px2rem(border-width,22);
                    border-style: solid;
                    border-color:transparent #239890 transparent transparent;
                }
            }
        }
        .data{
            background: white;
            &>div{
                .px2rem(padding-top,20);
                .px2rem(padding-bottom,20);
                .px2rem(padding-left,30);
                display: flex;
                ._left{
                    .px2rem(width,150);
                    img{
                        width:100%;
                        border-radius: 50%;
                    }
                }
                ._center{
                    .px2rem(padding-top,10);
                    .px2rem(padding-bottom,20);
                    border-bottom: 1px solid #ccc;
                    flex:1;
                    display: flex;
                    justify-content: space-between;
                    .cent_left{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .px2rem(font-size,30);
                        &>p:first-child{
                            color:skyblue;
                            span{
                                color:#798384;
                                .px2rem(padding-left,20);
                            }
                        }
                        &>p:last-child{
                            .px2rem(font-size,29);
                            color:#666;
                        }                        
                    }
                    .cent_right{
                        display: flex;
                        justify-content: space-between;
                        flex-direction: column;
                        &>p:first-child{
                            color:#798384;
                            .px2rem(font-size,30);
                            span{
                                color:#798384;
                                .px2rem(padding-left,20);
                            }
                        }
                        &>p:last-child{
                            text-align: right;
                            font-weight: bold;
                            .px2rem(font-size,29);
                            color:#2E4B4B;
                        }   
                    }
                }
                ._right{
                    width:8%;
                    display: flex;
                    justify-content:center;
                    align-items: center;
                    .px2rem(font-size,30);
                    color:#666;
                }
            }
        }
    }
}
.active{
    background:#58E5DE;
    border-radius: 50%;
}
</style>
